<template>
  <slide-view
    v-loading="loading"
    :listener-ids="listenerIDs"
    :no-listener-ids="noListenerIDs"
    :no-listener-class="noListenerClass"
    :body-style="{padding: 0, height: '100%', background: 'white'}"
    class="d-view"
    @afterEnter="getDetail"
    @close="hideView">
    <flexbox
      v-if="detailData"
      direction="column"
      align="stretch"
      style="padding: 0 15px;"
      class="side-detail-main">
      <wk-detail-header
        :dropdown-items="tabNameFlag?null:dropdownItems"
        :edit-field="loginUser.isAdmin"
        @edit-field-handle="editFieldHandle"
        @command-select="commandSelect">
        <div slot="body" class="employee-header" style="display: flex;align-items:center;">
          <div>
            <input
              id="inputFile"
              type="file"
              accept="image/png, image/jpeg, image/gif, image/jpg"
              style="display: none;"
              @change="uploadFile">
            <edit-image
              :show="showEditImage"
              :file="editFile"
              :image="editImage"
              @save="submitImage"
              @close="showEditImage=false" />
          </div>
          <div id="modal" class="modal" @click="hideModal()">
            <img id="modal-image" class="modal-image">
          </div>
          <div @click="showModal()">
            <flexbox class="user-box">
              <xr-avatar
                  :name="detailData.realName"
                  :size="90"
                  :src="detailData.img"
                  class="user-img" />
            </flexbox>
          </div>
          <div style="margin-top: 20px;">
            <div class="employee-header__top">
              <span class="name">{{ detailData.employeeName }}</span>
              <span class="post">{{ detailData.jobTitle }}</span>
            </div>
            <div class="employee-header__bottom">
              <el-tag
                v-if="detailData.sex === 1 || detailData.sex ===2"
                :class="{
                  1: 'is-man',
                  2: 'is-woman',
                }[detailData.sex]"
                disable-transitions
                class="xr-sex-tag"
                size="mini">
                <i
                  :class="{
                    1: 'wk wk-man',
                    2: 'wk wk-woman',
                  }[detailData.sex]" />
              </el-tag>

  <!--            <el-tooltip-->
  <!--              :content="`工号：${detailData.jobNumber|| '&#45;&#45;'}`"-->
  <!--              effect="dark"-->
  <!--              placement="top">-->
  <!--              <el-tag-->
  <!--                disable-transitions-->
  <!--                class="xr-tag"-->
  <!--                color="#ECEEF2"-->
  <!--                size="mini">-->
  <!--                <i class="wk wk-icon-work-card" />{{ detailData.jobNumber|| '&#45;&#45;' }}-->
  <!--              </el-tag>-->
  <!--            </el-tooltip>-->

              <el-tooltip
                :content="`部门：${detailData.deptPath|| '--'}`"
                effect="dark"
                placement="top">
                <el-tag
                  disable-transitions
                  class="xr-tag"
                  color="#ECEEF2"
                  size="mini">
                  <i class="wk wk-icon-layer" />{{ detailData.deptPath || '--' }}
                </el-tag>
              </el-tooltip>

              <el-tooltip
                :content="`员工状态：${getEmployeeStatusName(detailData.status)|| '--'}`"
                effect="dark"
                placement="top">
                <el-tag
                  disable-transitions
                  class="xr-tag"
                  color="#ECEEF2"
                  size="mini">
                  <i class="wk wk-icon-time" />{{ getEmployeeStatusName(detailData.status)|| '--' }}
                </el-tag>
              </el-tooltip>

              <el-tooltip
                :content="`任职日期：${detailData.dateOfEmployment|| '--'}`"
                effect="dark"
                placement="top">
                <el-tag
                  disable-transitions
                  class="xr-tag"
                  color="#ECEEF2"
                  size="mini">
                  <i class="wk wk-icon-status" />{{ detailData.dateOfEmployment|| '--' }}
                </el-tag>
              </el-tooltip>

              <el-tooltip
                :content="`年龄：${detailData.age|| '--'}`"
                effect="dark"
                placement="top">
                <el-tag
                  disable-transitions
                  class="xr-tag"
                  color="#ECEEF2"
                  size="mini">
                  <i class="wk wk-icon-cake" />{{ detailData.age || '--' }}
                </el-tag>
              </el-tooltip>
            </div>
          </div>
        </div>
      </wk-detail-header>
      <el-tabs
        v-model="tabCurrentName"
        class="side-detail__tabs--default">
        <el-tab-pane
          v-for="(item, index) in tabNameFlag?tabNames2:userInfo.mobile==detailData.mobile?tabNames1:tabNames"
          :key="index"
          :label="item.label"
          :name="item.name"
          lazy>
          <component
            :is="item.name"
            :id="id"
            :search="search"
            :refresh="refresh"
            :detail="detailData"
            class="side-detail-tabs-content"
            style="padding-top: 16px;"
            @getEmployeeDetail="getEmployeeDetail"
            @handle="relativeHandle" />
        </el-tab-pane>
      </el-tabs>
    </flexbox>
    <form-add-dialog
      ref="formAdddialog"
      :title="formAddTitle"
      :form.sync="formAddForm"
      :rules="formAddRules"
      :fields="formAddFields"
      :visible.sync="formAddDialogShow"
      @pass="formAddPass"
    />
    <!--  字段修改审核页面  -->
    <custom-form-update-field-dialog v-if="customFormAddDialogShow" :id="id" ref="customFormAdddialog" title="字段修改审核"
        :postFields="postFormAddFields" :baseFields="baseFormAddFields" :visible.sync="customFormAddDialogShow" @pass="updateFieldPass" />
  </slide-view>
</template>

<script>
import {
  hrmEmployeeQueryByIdAPI,
  hrmEmployeeDeleteByIdsAPI,
  adminUsersUpdateAvatarAPI,
  hrmEmployeeFileAddAPI,
  queryLoginEmployeeAPI,
  hrmEmployeePersonalInfoAPI,
  hrmUpdateKeyFieldAuditAPI
} from '@/api/hrm/employee'

import SlideView from '@/components/SlideView'
import EmployeePostInfo from './components/EmployeePostInfo'
import EmployeeBaseInfo from './components/EmployeeBaseInfo'
import EmployeeContract from './components/EmployeeContract'
import EmployeeMoney from './components/EmployeeMoney'
import EmployeeFiles from './components/EmployeeFiles'
import EmployeeHandle from './components/EmployeeHandle'
import FormAddDialog from './components/FormAddDialog'
import WkDetailHeader from '@/components/WkDetailHeader'

import { timeToFormatTime } from '@/utils'
import { employeeModel } from './model/employee'
import { mapGetters } from 'vuex'
import {hrmEmployeePostQueryByIdAPI} from "@/api/hrm/employeePost";
import EditImage from "@/components/EditImage.vue";
import store from "@/store";
import employField from './model/employField'
import { objDeepCopy } from '@/utils'
import CustomFormUpdateFieldDialog from './components/CustomFormUpdateFieldDialog'

export default {
  // 员工详情
  name: 'EmpolyeeDetail',
  components: {
    EditImage,
    WkDetailHeader,
    SlideView,
    EmployeePostInfo,
    EmployeeBaseInfo,
    EmployeeContract,
    EmployeeMoney,
    EmployeeFiles,
    EmployeeHandle,
    // EmployeeCreateView,
    FormAddDialog,
    CustomFormUpdateFieldDialog,
  },
  mixins: [],

  provide() {
    return {
      'editAuth': this.editAuth,
      'employeeAuth': this.employeeAuth
    }
  },
  props: {
    // 详情信息id
    id: [String, Number],
    search: {
      type: String,
      default: null
    },
    userInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 监听的dom 进行隐藏详情
    listenerIDs: {
      type: Array,
      default: () => {
        return ['crm-main-container']
      }
    },
    // 不监听
    noListenerIDs: {
      type: Array,
      default: () => {
        return []
      }
    },
    noListenerClass: {
      type: Array,
      default: () => {
        return ['el-table__body']
      }
    }
  },
  data() {
    return {
      refresh: false,
      // 新自定义字段弹窗
      postFormAddFields: [],
      baseFormAddFields: [],
      customFormAddDialogShow: false,
      channelList: [], // 招聘渠道数据
      postEditList: [],
      baseEditList: [],
      // 默认一寸蓝底
      defaultAvator: "",
      showEditImage: false,
      editFile: null,
      editImage: null,
      loading: false, // 展示加载loading
      detailData: null,
      tabNames: [
        { label: '岗位信息', name: 'EmployeePostInfo' },
        { label: '基本信息', name: 'EmployeeBaseInfo' },
        { label: '员工合同', name: 'EmployeeContract' },
        // { label: '工资社保', name: 'EmployeeMoney' },
        { label: '材料附件', name: 'EmployeeFiles' },
        { label: '操作记录', name: 'EmployeeHandle' }
      ],
      tabNames1: [
        { label: '岗位信息', name: 'EmployeePostInfo' },
        { label: '基本信息', name: 'EmployeeBaseInfo' },
        { label: '员工合同', name: 'EmployeeContract' },
        // { label: '工资社保', name: 'EmployeeMoney' },
        { label: '材料附件', name: 'EmployeeFiles' }
      ],
      tabNames2: [
        { label: '岗位信息', name: 'EmployeePostInfo' }
      ],
      tabCurrentName: 'EmployeePostInfo',
      // 弹窗添加
      formAddCommond: '',
      formAddTitle: '',
      formAddForm: {},
      formAddRules: {},
      formAddFields: [],
      formAddDialogShow: false,
      tabNameFlag: false,
      loginUser: {
        isAdmin: false,
        isSuperAdmin: false,
      },
    }
  },

  computed: {
    ...mapGetters([
      'hrm'
    ]),

    // 员工权限
    employeeAuth() {
      return this.hrm.employee
    },

    // 删除权限
    deleteAuth() {
      return this.employeeAuth && this.employeeAuth.delete
    },

    // 删除权限
    editAuth() {
      return this.employeeAuth && this.employeeAuth.update
    },

    tabName() {
      if (this.tabCurrentName == 'EmployeePostInfo') {
        return 'EmployeePostInfo'
      } else if (this.tabCurrentName == 'EmployeeBaseInfo') {
        return 'EmployeeBaseInfo'
      } else if (this.tabCurrentName == 'EmployeeContract') {
        return 'EmployeeContract'
      } else if (this.tabCurrentName == 'EmployeeMoney') {
        return 'EmployeeMoney'
      } else if (this.tabCurrentName == 'EmployeeFiles') {
        return 'EmployeeFiles'
      } else if (this.tabCurrentName == 'EmployeeHandle') {
        return 'EmployeeHandle'
      }
      return ''
    },

    dropdownItems() {
      const temps = []
      // if (this.detailData && this.detailData.status == 9) {
      //   temps.push({
      //     label: '调整离职信息',
      //     command: 'change-leave',
      //     icon: 'wk wk-reset'
      //   })
      // }
      if (this.deleteAuth) {
        temps.push({
          icon: 'wk wk-delete',
          label: '删除',
          command: 'delete'
        })
      }
      return temps
    },
    imageCache() {
      return store.state.app.imageCache
    },
  },
  watch: {
    id: function(val) {
      this.getDetail()
    }
  },
  mounted() {
  },
  created() {
    this.getLoginUser()
  },
  methods: {

    updateFieldPass(data) {
      const postList = objDeepCopy(data.postParams.field)
      postList.forEach(item => {
        if (item.fieldName == 'work_city') {
          if (item.value) {
            const keys = Object.keys(item.value)
            let address = ''
            keys.forEach(key => {
              if (item.value[key]) {
                if (!address) {
                  address = item.value[key]
                } else {
                  address += `,${item.value[key]}`
                }
              }
            })
            item.value = address
          } else {
            item.value = ''
          }
        }
        // 表格字段value 和 filed
        if (item.type === 45) {
          const tableValue = item.value
          if (isArray(tableValue)) {
            tableValue.forEach(children => {
              if (children) {
                children.forEach(child => {
                  if (child) {
                    child.fieldValue = child.value
                  }
                })
              }
            })
          }
        }
        delete item.fieldType
        item.fieldValue = item.value
        delete item.value
      })
      const baseList = objDeepCopy(data.baseParams.field)
      baseList.forEach(item => {
        if (item.fieldName == 'native_place') {
          if (item.value) {
            const keys = Object.keys(item.value)
            let address = ''
            keys.forEach(key => {
              if (item.value[key]) {
                if (!address) {
                  address = item.value[key]
                } else {
                  address += `${item.value[key]}`
                }
              }
            })
            item.value = address
          } else {
            item.value = ''
          }
        }
        if (item.fieldName == 'birth_place') {
          if (item.value) {
            const keys = Object.keys(item.value)
            let address = ''
            keys.forEach(key => {
              if (item.value[key]) {
                if (!address) {
                  address = item.value[key]
                } else {
                  address += `${item.value[key]}`
                }
              }
            })
            item.value = address
          } else {
            item.value = ''
          }
        }
        // 表格字段value 和 filed
        if (item.type === 45) {
          const tableValue = item.value
          if (isArray(tableValue)) {
            tableValue.forEach(children => {
              if (children) {
                children.forEach(child => {
                  if (child) {
                    child.fieldValue = child.value
                  }
                })
              }
            })
          }
        }
        delete item.fieldType
        item.fieldValue = item.value
        delete item.value
      })

      const dialog = this.$refs.customFormAdddialog
      dialog.loading = true
      const postParams = {employeeId : this.id, dataList : postList}
      const baseParams = {employeeId : this.id, dataList : baseList}

      hrmUpdateKeyFieldAuditAPI({postParams, baseParams}).then(res => {
        dialog.loading = false
        this.$message.success(`提交员工关键字段审核成功`)
        this.customFormAddDialogShow = false
        // this.getDetail()
        this.refresh= !this.refresh;
        this.getDetail();
        this.updateKey = Date.now()
        this.$emit('handle', { type: this.formAddCommond })
      }).catch(() => {
        dialog.loading = false
      })
    },

    /**
     * 处理表格数据块数据
     */
    handleFieldExtendList(item) {
      // 表格为了展示，提前处理为编辑数据
      if (item.formType === 'detail_table') {
        if (!isEmpty(item.fieldExtendList)) {
          const fieldExtendList = item.fieldExtendList
          if (isArray(fieldExtendList)) {
            fieldExtendList.forEach(child => {
              if (child) {
                employField.getCreateFieldDefalutData(child)
                child.value = child.fieldValue
              }
            })
          }
        }
      }
    },

    /**
     * 处理表格数据 为了转换 value 和 fieldValue
     */
    handleTableValue(item) {
      // 表格为了展示，提前处理为编辑数据
      if (item.formType === 'detail_table') {
        if (!isEmpty(item.value)) {
          const tableValue = item.value
          if (isArray(tableValue)) {
            tableValue.forEach(children => {
              if (children) {
                children.forEach(child => {
                  if (child) {
                    employField.getCreateFieldDefalutData(child)
                    child.value = child.fieldValue
                  }
                })
              }
            })
          }
        }
        if (!isArray(item.value)) {
          item.value = []
        }
      }
    },

    editFieldHandle(){
        this.editPostField()
        this.editBaseField()
        this.customFormAddDialogShow = true
    },

    editPostField(){
        const copyList = objDeepCopy(this.postEditList)
        const fields = []
        copyList.forEach(item => {
          // 忽略掉员工状态和司龄
          if (item.fieldName != 'company_age' &&
            item.fieldName != 'become_time') {
            this.handleFieldExtendList(item)
            employField.getCreateFieldDefalutData(item)
            item.value = item.fieldValue

            this.handleTableValue(item)

            // 为和crm统一，将work_city的 formType 改为 从 area 改为 address
            if (item.fieldName === 'work_city') {
              item.formType = 'address'
            }
            // 处理部门商机为单选
            if (item.fieldName === 'dept_id' || item.fieldName === 'parent_id') {
              item.radio = true
            }
            // 1 正式  2 非正式
            if (item.fieldName == 'employment_forms') {
              item.disabled = true
              item.setting = employeeModel.employmentFormsSetting
            } else if (item.fieldName == 'probation') {
              item.setting = employeeModel.probationSetting
            } else if (item.formType == 'recruit_channel') { // 'recruit_channel' 招聘渠道
              item.formType = 'select'
              if (this.channelList && this.channelList.length > 0) {
                item.setting = this.channelList
              } else {
                this.getChannelDetail(item)
              }
            } else if (item.fieldName == 'status') {
              item.setting = employeeModel.statusSetting
            }

            // 表格为了展示，提前处理为编辑数据
            if (item.formType === 'detail_table') {
              if (!isEmpty(item.value)) {
                const tableValue = item.value
                if (isArray(tableValue)) {
                  tableValue.forEach(children => {
                    if (children) {
                      children.forEach(child => {
                        if (child) {
                          child.value = child.fieldValue
                        }
                      })
                    }
                  })
                }
              }
              if (!isArray(item.value)) {
                item.value = []
              }
            }

            // 聘用形式 是非正式 读取所有值  是正式 忽略状态的值
            // if (this.detail.employmentForms == 2 ||
            // (this.detail.employmentForms == 1 &&
            // item.fieldName != 'status')) {
            if (item.fieldName != 'status') {
              if (item.formType == 'address') {
                if (item.value) {
                  const citys = item.value.split(',')
                  item.value = {
                    province: citys[0] || '',
                    city: citys[1] || '',
                    area: citys[2] || ''
                  }
                } else {
                  item.value = {}
                }
              }
              item.disabled = false;
              fields.push(item)
            }
          }
        })
        this.postFormAddFields = fields
    },

    editBaseField(){
        const baseEditList = objDeepCopy(this.baseEditList)
        const fields = []
        baseEditList.forEach(item => {
          if (item.fieldName != 'age' && item.fieldName != 'company_age') {
            this.handleFieldExtendList(item)
            employField.getCreateFieldDefalutData(item)
            item.value = item.fieldValue

            this.handleTableValue(item)

            if (item.formType == 'city') {
              if (item.value) {
                const citys = item.value.split(',')
                item.value = {
                  province: citys[0] || '',
                  city: citys[1] || ''
                }
              } else {
                item.value = {}
              }
            }
            item.disabled = false;
            fields.push(item)
          }
        })
        this.baseFormAddFields = fields
    },


    /**
     * 获取当前登录人信息
     */
    getLoginUser() {
      queryLoginEmployeeAPI()
        .then(res => {
          this.loginUser = res.data;
        })
        .catch(() => {
        })
    },

    getEmployeeDetail() {
      hrmEmployeeQueryByIdAPI(this.id)
        .then(res => {
          this.loading = false
          const data = res.data || {}
          data.entryTime = timeToFormatTime(data.entryTime)
          this.detailData = data
        }).catch(() => {
        this.loading = false
      })
    },

    addTextToImage(base64Img, text, x, y) {
      return new Promise((resolve, reject) => {
        // 创建Image对象
        const img = new Image();
        img.src = base64Img;

        // 错误处理
        img.onerror = (error) => {
          reject(defaultAvator);
        };

        // 等待图片加载完成
        img.onload = () => {
          // 创建canvas
          const canvas = document.createElement('canvas');
          canvas.width = img.width;
          canvas.height = img.height;
          // 获取canvas上下文
          const ctx = canvas.getContext('2d');
          // 绘制图片
          ctx.drawImage(img, 0, 0);
          // 设置字体、颜色等样式
          ctx.font = '50px Arial';
          ctx.fillStyle = 'white';
          ctx.textAlign = 'start';
          // 绘制文字
          ctx.fillText(text, x, y);
          // 将canvas转换为base64图片
          const newBase64Img = canvas.toDataURL('image/png');
          // 使用resolve来返回结果
          resolve(newBase64Img);
        };
      });
    },

    async showModal() {
      let modal = document.getElementById("modal");
      let modalImage = document.getElementById("modal-image");
      modal.style.display = "block";
      if (this.detailData.img){
        modalImage.src = this.imageCache[this.detailData.img];
      }else {
        let x = Math.floor((300 - this.detailData.realName.length * 50) / 2);
        modalImage.src = await this.addTextToImage(this.defaultAvator, this.detailData.realName, x, 180);
      }
    },

    hideModal() {
      let modal = document.getElementById("modal");
      modal.style.display = "none";
    },
    /**
     * 图片操作
     * @param event
     */
    uploadFile(event) {
      const files = event.target.files
      const file = files[0]
      const reader = new FileReader()
      const self = this
      reader.onload = function(e) {
        let result
        if (typeof e.target.result === 'object') {
          // 把Array Buffer转化为blob 如果是base64不需要
          result = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          result = e.target.result
        }
        self.editImage = result
        self.editFile = file
        self.showEditImage = true
        e.target.value = ''
      }
      reader.readAsDataURL(file)
    },

    /**
     * 上传提交头像修改
     * @param data
     */
    submitImage(data) {
      this.loading = true
      const param = new FormData()
      param.append('userId', this.detailData.userId)
      param.append('file', data.blob, data.file.name)
      adminUsersUpdateAvatarAPI(param).then((res) => {
        //将图片保存到个人附件
        hrmEmployeeFileAddAPI({
          employeeId: this.id,
          subType: 13,
          fileId: res.data
        }).then(response => {
        }).catch(() => {
        })
        this.getEmployeeDetail()
      }).catch(() => {
        this.loading = false
      })
    },

    handleChangeAvatar() {
      if (!this.detailData.userId){
        this.$message.error('员工账号信息不存在！请先创建该员工账号信息，再上传头像！')
        return;
      }
      document.getElementById('inputFile').click()
    },

    getDetail() {
      this.loading = true
      hrmEmployeeQueryByIdAPI(this.id)
        .then(res => {
          this.loading = false
          const data = res.data || {}
          data.entryTime = timeToFormatTime(data.entryTime)

          this.detailData = data
        })
        .catch(() => {
          this.loading = false
        })
      hrmEmployeePostQueryByIdAPI(this.id)
        .then(res => {
          this.tabNameFlag = res.data.information == null? true: false;
          this.postEditList = res.data.information || []
        }).catch(() => {
        })
      hrmEmployeePersonalInfoAPI(this.id)
        .then(res => {
          this.baseEditList = res.data.information || []
        })
        .catch(() => {
        })
    },

    /**
     * 员工状态展示值
     */
    getEmployeeStatusName(status) {
      return status ? employeeModel.statusValue[parseInt(status)] : ''
    },

    /**
     * 点击关闭按钮隐藏视图
     */
    hideView() {
      this.$emit('close')
    },

    /**
     * 更多操作
     */
    commandSelect(command) {
      this.formAddCommond = command
      if (command == 'delete') {
        this.$confirm('确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            hrmEmployeeDeleteByIdsAPI([this.id])
              .then(res => {
                this.$message({
                  type: 'success',
                  message: '删除成功'
                })
                this.$emit('handle', { type: command })
              })
              .catch(() => {})
          })
          .catch(() => {})
      }
    },

    /**
     * 相关模块的操作
     */
    relativeHandle(data) {
      this.$emit('handle', data)
    },

    /**
     * 勾选操作
     */
    formAddPass() {
      this.$refs.formAdddialog.loading = true
      this.formAddForm.employeeId = this.handleRowData.employeeId
      const request = null

      request(this.formAddForm).then(res => {
        this.$refs.formAdddialog.loading = false
        this.$message.success(`${this.formAddTitle}成功`)
        this.formAddDialogShow = false
        this.getTabsNum()
        this.getList()
      }).catch(() => {
        this.$refs.formAdddialog.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/side-detail.scss";

.employee-header {
  &__top {
    .name {
      font-size: 20px;
      font-weight: bold;
    }

    .post {
      margin-left: 8px;
      font-size: 12px;
      font-weight: bold;
    }
  }

  &__bottom {
    margin-top: 10px;

    .xr-tag {
      color: $--color-text-regular;
      border: none;

      ::v-deep i {
        margin-right: 5px;
        font-size: 12px;
      }
    }

    .xr-sex-tag {
      border: none;

      ::v-deep i {
        font-size: 12px;
        color: white;
      }

      &.is-man {
        background: #3875ff;
      }

      &.is-woman {
        background: #ff3838;
      }
    }
  }

  .user-box {
    margin-top: 20px;
    .user-img {
      margin-right: 20px;
    }
  }
}

.side-detail__tabs--default {
  padding: 0 20px;
}
.vux-flexbox.xr-detail-header.vux-flex-row {
  padding: 0 20px;
}
.employee-header__top .name {
  font-size: 30px;
}
.employee-header__top .post {
  font-size: 18px;
}
.employee-header__bottom .xr-tag {
  font-size: 16px;
}

.el-tooltip.xr-avatar.user-img.el-avatar.el-avatar--circle.cursor-pointer {
  background: rgb(67, 142, 219) !important;
  height: 140px !important;
  width: 100px !important;
}

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal-image {
  display: block;
  max-width: 90%;
  max-height: 90%;
  margin: auto;
  margin-top: 10%;
}

.el-avatar--circle {
  border-radius: 0%;
}
</style>
